Custom Number Formatting in your chart

Adding prefix / suffix to numbers

We can add prefix / suffix to numbers using format attribute in schema.

Specify the format in schema

const nf = new Intl.NumberFormat();
const numberFormat = (v) => `${nf.format(v)}$`;

const schema = [
  {
    name: "Sales",
    type: "measure",
    format: numberFormat,
  },

  {
    name: "Region",
    type: "dimension",
  },

  {
    name: "Category",
    type: "dimension",
  },
];

Set tickFormat in axis configuration. This tells muze to format the tick labels of x-axis using this format.

muze.canvas().config({
  axes: {
    x: {
     // Pass numberFormat function here that we defined above
     tickFormat: (v) => `${nf.format(v.rawValue)}$`
    }
  },
  interaction: {
    tooltip: {
      fieldFormatters: {
        "Sales": (v) => `${nf.format(v.rawValue)}$`
      }
    }
  }
});

Example

  const { muze, getDataFromSearchQuery, env } = viz;

  const DataModel = muze.DataModel;
  const nf = new Intl.NumberFormat();

  const data = [
    ["id","Market","Product Type","Product","Revenue","Expense","Profit","Order Count"],
    [1, "South", "Tea", "Darjeeling", 24293, 7013, 6407, 134],
    [2, "South", "Tea", "Earl Grey", 14711, 8018, 2769, 110],
    [3, "West", "Tea", "Darjeeling", 21451, 9154, -56, 136],
    [4, "West", "Tea", "Earl Grey", 16007, 5337, -605, 57],
    [5, "East", "Tea", "Earl Grey", 31433, 3657, 9035, 142],
    [6, "East", "Tea", "Earl Grey", 22495, 9009, 2279, 122],
    [7, "West", "Tea", "Darjeeling", 10889, 5810, 9843, 146],
    [8, "North", "Tea", "Green Tea", 21092, 9112, 10867, 114],
    [9, "South", "Tea", "Earl Grey", 15000, 8244, 10397, 41],
    [10, "South", "Tea", "Darjeeling", 25677, 3391, 6214, 55],
    [11, "West", "Tea", "Green Tea", 22630, 10208, 17861, 63]
    // ...and so on...
  ]

  const schema = [
  {
    name: 'Profit',
    type: 'measure',
    format: (v) => `${v}$`
  },
  {
    name: 'Market',
    type: 'dimension'
  },
  {
    name: 'Product Type',
    type: 'dimension'
  }
  ];

  const parsedData = DataModel.loadDataSync(data, schema);
  const dm = new DataModel(parsedData);

  muze
    .canvas()
    .data(dm)
    .rows(['Market', 'Product Type'])
    .columns(['Profit'])
    .config({
      axes: {
        x: {
          tickFormat: (v) => {
            return `${nf.format(v.rawValue)}$`
          }
        }
      },
      interaction: {
        tooltip: {
          fieldFormatters: {
            "Sales": (v) => `${nf.format(v.rawValue)}$`
          }
        }
      }
    })
    .mount('#chart');

Adding comma separators to numbers

Specify format in schema:

const nf = new Intl.NumberFormat();
// This formats the numbers using commas
const numberFormat = (v) => `${nf.format(v)}$`;

const schema = [
  {
    name: "Profit",
    type: "measure",
    format: numberFormat,
  },
  {
    name: "Market",
    type: "dimension",
  },
  {
    name: "Product Type",
    type: "dimension",
  },
];

Set tickFormat in axis configuration.

muze.canvas().config({
  axes: {
    x: {
     // Pass numberFormat function here that we defined above
     tickFormat: numberFormat
    }
  }
});

Example

const { muze, getDataFromSearchQuery, env } = viz;

const DataModel = muze.DataModel;

const data = [
  ["id","Market","Product Type","Product","Revenue","Expense","Profit","Order Count"],
  [1, "South", "Tea", "Darjeeling", 24293, 7013, 6407, 134],
  [2, "South", "Tea", "Earl Grey", 14711, 8018, 2769, 110],
  [3, "West", "Tea", "Darjeeling", 21451, 9154, -56, 136],
  [4, "West", "Tea", "Earl Grey", 16007, 5337, -605, 57],
  [5, "East", "Tea", "Earl Grey", 31433, 3657, 9035, 142],
  [6, "East", "Tea", "Earl Grey", 22495, 9009, 2279, 122],
  [7, "West", "Tea", "Darjeeling", 10889, 5810, 9843, 146],
  [8, "North", "Tea", "Green Tea", 21092, 9112, 10867, 114],
  [9, "South", "Tea", "Earl Grey", 15000, 8244, 10397, 41],
  [10, "South", "Tea", "Darjeeling", 25677, 3391, 6214, 55],
  [11, "West", "Tea", "Green Tea", 22630, 10208, 17861, 63]
  // ...and so on...
]

const nf = new Intl.NumberFormat();
const numberFormat = (v) => `${nf.format(v)}$`;

const schema = [
  {
    name: 'Profit',
    type: 'measure',
    format: numberFormat
  },
  {
    name: 'Market',
    type: 'dimension'
  },
  {
    name: 'Product Type',
    type: 'dimension'
  }
];

const parsedData = DataModel.loadDataSync(data, schema);
const dm = new DataModel(parsedData);

muze
  .canvas()
  .data(dm)
  .rows(['Market', 'Product Type'])
  .columns(['Profit'])
  .config({
    axes: {
      x: {
        tickFormat: (v) => {
          return `${nf.format(v.rawValue)}$`
        }
      }
    },
    interaction: {
      tooltip: {
        fieldFormatters: {
          "Sales": (v) => `${nf.format(v.rawValue)}$`
        }
      }
    }
  })
  .mount('#chart');